<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户">
                <a-input v-model="where.user_keyword" placeholder="请输入用户ID/昵称" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="代理区域">
                <city-select v-model="area_arr" data-type="area" value-type="1" @change="areaChange"></city-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="区域等级">
                <a-select v-model="where.area_level" placeholder="请选择区域等级" allowClear>
                  <a-select-option value="1">省代</a-select-option>
                  <a-select-option value="2">市代</a-select-option>
                  <a-select-option value="3">区代</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="分红时间">
                <a-range-picker @change="dateChange" placeholder="请选择通过时间" allowClear style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false" style="margin-bottom: 11px">
      <div class="table-operator flex-y-center flex-x-sb">
        <div class="flex-y-center flex-x-sb">
          <a-radio-group v-model="where.status" style="margin-right: 15px" @change="getList">
            <a-radio-button :value="''"> 全部 </a-radio-button>
            <a-radio-button :value="0"> 释放成功 </a-radio-button>
            <a-radio-button :value="1"> 释放失败 </a-radio-button>
          </a-radio-group>
        </div>
        <div>检索结果：{{ totalCount }}条，积分{{ total_integral }}</div>
      </div>
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.where.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        @change="handleTableChange"
        :scroll="{ x: 1500 }"
      >
        <template slot="user_info" slot-scope="record">
          <div class="flex-y-center">
            <img style="width: 35px; height: 35px; margin-right: 5px" :src="record.user_avatar" alt="" />
            {{ record.user_nickname }}
          </div>
        </template>
        <template slot="area_level" slot-scope="record">
          {{
            record.agent.area_level == 1
              ? '省代'
              : record.agent.area_level == 2
              ? '市代'
              : record.agent.area_level == 3
              ? '区代'
              : ''
          }}
        </template>
        <template slot="area_role" slot-scope="record">
          {{ record.agent.role == 1 ? '区域代表' : '区域股东' }}
        </template>
        <template slot="area" slot-scope="record">
          {{ record.agent.province }}{{ record.agent.city }}{{ record.agent.district }}
        </template>
        <template slot="send_rate" slot-scope="record"> {{ record.send_rate }}% </template>
        <template slot="status" slot-scope="record">
          <a-tag :color="record.status == 1 ? 'blue' : ''">{{ record.status_text }}</a-tag>
        </template>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
var _self
import { integralFreeListApi } from '@/api/area'
import CitySelect from '@/components/CitySelect/CitySelect'
export default {
  components: { CitySelect },
  data() {
    return {
      where: {
        user_keyword: '',
        city_id: '',
        district_id: '',
        province_id: '',
        dateStart: '',
        dateEnd: '',
        area_level: undefined,
        sortField: '',
        sortOrder: '',
        status: '',
        pageNo: 1,
        pageSize: 10,
      },
      area_arr: [],
      dataSource: [],
      loading: false,
      totalCount: 0,
      total_integral: 0,
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 60,
        },
        {
          title: '用户ID',
          dataIndex: 'user_id',
          width: 80,
        },
        {
          title: '会员信息',
          scopedSlots: { customRender: 'user_info' },
          width: 160,
        },
        {
          title: '等级',
          width: 100,
          scopedSlots: { customRender: 'area_level' },
          align: 'center',
        },
        {
          title: '身份',
          width: 100,
          scopedSlots: { customRender: 'area_role' },
          align: 'center',
        },
        {
          title: '代理区域',
          width: 180,
          scopedSlots: { customRender: 'area' },
        },
        {
          title: '释放时待释放积分',
          width: 150,
          dataIndex: 'calculate_num',
        },
        {
          title: '释放比例',
          width: 100,
          scopedSlots: { customRender: 'send_rate' },
          align: 'center',
        },
        {
          title: '释放数量',
          dataIndex: 'send_num',
          width: 90,
          align: 'center',
        },
        {
          title: '累计释放',
          dataIndex: 'total_send',
          width: 90,
          align: 'center',
        },
        {
          title: '状态',
          width: 80,
          scopedSlots: { customRender: 'status' },
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          width: 180,
          align: 'center',
          // sorter: true,
        },
      ],
    }
  },
  created() {
    _self = this
    _self.getList()
  },
  methods: {
    getList() {
      _self.loading = true
      integralFreeListApi(_self.where)
        .then((res) => {
          const { data, totalCount, total_integral } = res.data
          _self.dataSource = data
          _self.totalCount = totalCount
          _self.total_integral = total_integral
          _self.loading = false
        })
        .catch((err) => {
          _self.loading = false
        })
    },
    // 搜索地区
    areaChange(e) {
      _self.where.province_id = e[0] || ''
      _self.where.city_id = e[1] || ''
      _self.where.district_id = e[2] || ''
    },
    // 搜索时间
    dateChange(date, dateString) {
      _self.where.dateStart = dateString[0]
      _self.where.dateEnd = dateString[1]
    },
    handleTableChange(pagination, filters, sorter) {
      _self.where.sortField = sorter.field
      if (sorter.order) {
        if (sorter.order == 'ascend') {
          _self.where.sortOrder = 'asc'
        } else {
          _self.where.sortOrder = 'desc'
        }
      } else {
        _self.where.sortField = ''
        _self.where.sortOrder = ''
      }
      _self.getList()
    },
    tablePageChange(e) {
      this.where.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.where.pageNo = current
      this.where.pageSize = size
      this.getList()
    },
  },
}
</script>

<style lang="scss">
.ant-cascader-picker,
.ant-cascader-input {
  height: 32px;
}
</style>
